<template>
  <div>
    <div>
      <el-button type="primary" @click="addEdit('add')"><i class="iconfont icon-plus"></i>添加</el-button>
    </div>
    <div>
      <el-table
        :data="mainList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="msg_summary"
          width="280"
          label="内容"
        >
        </el-table-column>
        <el-table-column
          prop="mobilenum"
          label="发布时间"
        >
          <template slot-scope="scope">
            {{scope.row.pub_time | formatDate('yyyy/MM/dd hh:mm:ss')}}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="addEdit('look', scope.row)"><i class="iconfont icon-1202youjiantou"></i>详情</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="prev, pager, next"
        @current-change="_mainList"
        :current-page.sync="page.curpage"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- // 添加编辑角色 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="initData">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="定时发布时间：" label-width="120px" >
          <el-date-picker
            :disabled="dialogMode!=='add'"
            style="width: 100%;"
            v-model="form.pub_time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="内容：" label-width="120px">
          <wangeditor ref="editor" v-model="form.msg_content"></wangeditor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="dialogMode === 'add'">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getList, del, add} from 'api/sysMsgManagementAPI'
import { removeTAG } from 'common/js/util'
import wangeditor from 'components/wangeditor'
export default {
  components: {
    wangeditor
  },
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加'
      }else{
        return '详情'
      }
    }
  },
  data() {
    return {
      rules: {
        
      },
      mainList: [],
      form: {},
      page: {
        total: 1,
        curpage: 1
      },
      dialogMode: 'add',
      dialogFormVisible: false
    }
  },
  methods: {
    doAction(){
      let data = JSON.parse(JSON.stringify(this.form))
      if(!data.pub_time){
        this.$message({
          message: '请选择发布时间',
          type: 'error'
        })
        return
      }
      data.pub_time = +new Date(data.pub_time)/1000 | 0
      if(!data.msg_content){
        this.$message({
          message: '请输入发布内容',
          type: 'error'
        })
        return
      }
      var str = removeTAG(data.msg_content)
      data.msg_summary = str.substr(0, 20)
      if(data.msg_summary.length === 20){
        data.msg_summary += '...'
      }
      add(data).then(res => {
        if(res) {
          this.dialogFormVisible = false
          this.$message({
            message: res.rMsg,
            type: 'success'
          })
          this._mainList()
        }
      })
    },
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._delAdm(row)
      })
    },
    _delAdm(row){
      del(row.msg_id).then(res => {
        this.$message({
          message: res.rMsg,
          type: 'success'
        })
        this._caozuoAfter()
      })
    },
    addEdit(type, row){
      this.dialogMode = type
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs.editor.changeEditorStatus(true)
        this.$refs.editor.insertHTML('')
      })
      if(row){
        let data = JSON.parse(JSON.stringify(row))
        data.pub_time = new Date(data.pub_time * 1000)
        this.form = data 
        this.$nextTick(() => {
          this.$refs.editor.insertHTML(this.form.msg_content)
          this.$refs.editor.changeEditorStatus(false)
        })
      }
    },
    _caozuoAfter(){
      this.dialogFormVisible = false
      this.page.curpage = 1
      this._mainList()
    },
    initData(){
      this.form = {}
    },
    _mainList(){
      getList(this.page.curpage).then(res => {
        this.page.total = res.pageInfo.Total
        this.mainList = res.rData
      })
    },
  },
  created(){
    this._mainList()
  }
}
</script>